const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const path = require("path");

module.exports = {
  // production 压缩
  // development 不压缩
  mode: "production", //模式
  // devtool: "none", //sourceMap 关闭
  // devtool: "cheap-module-eval-source-map", //开发
  devtool: "cheap-module-source-map", //线上
  // 开启修改监听/启动浏览器
  devServer: {
    contentBase: ".dist", //服务启动的目录
    open: true, //自动打开浏览器
    port: 8080, //端口号
    hot: true, //开启热模块替换
    hotOnly: true, // 不让浏览器自动刷新
  },
  entry: {
    mian: "./src/index.js", //入口文件
  },
  resolve: {
    extensions: [".js", ".vue"], // 默认文件
    mainFiles: ["index"], //默认包文件下的主文件
    // 起别名
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          //npm install url-loader -D
          // 将文件放置在出口文件
          // 获取文件名，返回给引用对象
          loader: "url-loader",
          options: {
            // placeholder 占位符
            limit: 20480, //小于2048就转为base64,大于2048就转为图片
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        exclude:[path.resolve(__dirname, './node_modules')],
        oneOf: [
          // 这里匹配 `<style module>`
          {
            resourceQuery: /css_modules/,
            use: [
              'vue-style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 2,
                  modules: true,
                  localIdentName: '[path][name]__[local]--[hash:base64:5]',
                  camelCase: true
                }
              },
              "sass-loader",
              "postcss-loader",
            ]
          },
          // 这里匹配普通的 `<style>` 或 `<style scoped>`
          {
            use: [
              'vue-style-loader',
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 2,
                }
              },
              "sass-loader",
              "postcss-loader",
            ]
          }
        ]
      },
      {
        test: /\.(eot|ttf|svg|woff)$/,
        use: {
          //npm install file-loader -D （简单处理静态资源）
          loader: "file-loader",
        },
      },
      // {
      //   test: /\.svg$/,
      //   use: {
      //     loader: "svg-sprite-loader"
      //   },
      //   options: {
      //     include:path.resolve(__dirname, './src/icons')
      //     extract: true,
      //     publicPath: '/'
      //   }
      // },
      {
        test: /\.js$/,
        exclude: /node_module/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@vue/babel-preset-jsx",
              {
                vModel: false
              },
              
            ],
          ],
          // 不影响全局
          plugins: [
            [
              "@babel/plugin-transform-runtime",
              {
                absoluteRuntime: false,
                corejs: 2,
                helpers: true,
                regenerator: true,
                useESModules: false,
                version: "7.0.0-beta.0",
              },
            ],
            "syntax-dynamic-import",
            "./src/plugin/auto-css-modules.js",// 引入插件
          ],
        },
      },
      {
        test: /\.vue$/,
        use: {
          loader: "vue-loader",
        },
      },
    ],
  },
  plugins: [
    // new HtmlWebpackPlugin({
    //   // 生成的新html的模板
    //   template: "src/index.html",
    // }),
    new VueLoaderPlugin(),
    // 先运行 先删除在生生成
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    // 使用热模块替换，防止浏览器更新
    new webpack.HotModuleReplacementPlugin(),
  ],
  optimization: {
    usedExports: true,
  },
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'library.js',
    library: 'mylib',
    libraryTarget: 'umd'
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    },
    ElementUI: {
      root: 'ElementUI',
      commonjs: 'ElementUI',
      commonjs2: 'ElementUI',
      amd: 'ElementUI'
    }
  },
};
